<template>
	<div class="container" id="fullpage" style="margin-top:-60px">
		<div class="section">
			<!-- 首页内容 -->
			<div class="content hero">
				<div class="hero-text">
					<h1>欢迎来到萌芽工作室</h1>
					<p>萌芽工作室致力于提供最前沿的技术解决方案和创新服务。我们的团队专注于移动应用开发、人工智能、大数据等领域，欢迎加入我们的大家庭。</p>
				</div>
				<div class="hero-image">
					<img src="../../src/assets/wechat-qrcode.jpg" alt="萌芽微信小程序二维码" class="qr-code">
				</div>
			</div>
		</div>
		<div class="section">
			<!-- 成员介绍 -->
			<div class="content" style="padding: 20px;">
				<h2 style="text-align: start;">工作室成员</h2>
				<div style="margin-top: 20px;display:grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap:20px;">
					<figure v-for="(item, index) in userData" style="height: 18vw;" v-if="index<10">
						<img :src="baseUrl + item.img.data.attributes.url" alt="" style="width: 100%;height:100%">
						<div class="p"
							style="display: flex;align-items: center;justify-content: center;padding: 10px;height: 100%;">
							<div>
								<div style="">{{ item.name }}</div>
								<div style="">{{ item.tag }}</div>
								<div style="" v-html="item.intro"></div>
							</div>

						</div>
					</figure>
				</div>

			</div>
		</div>
		<div class="section">
			<!-- 成员介绍 -->
			<div class="content" style="padding: 20px;">
				<h2 style="text-align: start;">工作室成员</h2>
				<div style="margin-top: 20px;display:grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap:20px;">
					<figure v-for="(item, index) in userData" style="height: 18vw;" v-if="index>=10">
						<img :src="baseUrl + item.img.data.attributes.url" alt="" style="width: 100%;height:100%">
						<div class="p"
							style="display: flex;align-items: center;justify-content: center;padding: 10px;height: 100%;">
							<div>
								<div class="name">{{ item.name }}</div>
								<div class="tag">{{ item.tag }}</div>
								<div class="info" v-html="item.intro"></div>
							</div>

						</div>
					</figure>
				</div>

			</div>
		</div>
		<!-- 轮播 -->
		<div class="section slider" v-for="item in swiperData" :style="{backgroundImage: `url(${baseUrl + item})`}">
			<div class="content">
				<!-- <h2>Technical Blog</h2>
	  		<p>Explore our latest articles and insights on web development and AI.</p> -->
			</div>
		</div>

		
	</div>
</template>

<style>
	.container {
		width: 100%;
		height: 100%;
	}

	.slider {
		background-size: cover;
		/* 保持比例拉伸铺满 */
		background-position: center;
		/* 居中对齐背景图片 */
		background-repeat: no-repeat;
		/* 禁止背景图片重复 */
		width: 100%;
		/* 设置div宽度 */
		height: 100%;
		/* 设置div高度为视口高度 */
	}

	img {
		display: block;
	}

	figure {
		height: auto;
		width: auto;
		overflow: hidden;
		position: relative;
		background: #000000;
		border-radius: 10px;
	}

	figure img {
		height: 250px;
		width: 250px;
		transition: all 0.6s ease;
		/* position: absolute; */
		opacity: 1;
		object-fit: cover;
	}

	figure .p {
		position: absolute;
		color: #fff;
		transform: translate(-360px, 0);
		top: 0%;
		left: 0%;
		right: 0%;
		transition: all 0.6s ease;
	}

	figure:hover img {
		transform: scale(1.2, 1.2);
		transition: all 0.6s ease;
		opacity: 0.6;
	}

	figure:hover .p {
		transform: translate(0, 0);
		transition: all 0.6s ease;
	}
	
	    .hero {
	        display: flex;
	        flex-direction: row;
	        align-items: center;
	        justify-content: center;
	        text-align: left;
	        padding: 50px;
	        background-color: rgba(0, 0, 0, 0.1);
	        color: white;
	    }
	
	    .hero-text {
	        flex: 1;
	        padding-right: 20px;
	    }
	
	    .hero-image {
	        flex: 1;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	    }
	
	    .qr-code {
	        width: 300px;
	        height: 300px;
	        object-fit: cover;
	        border: 5px solid white;
	        border-radius: 10px;
	        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	    }
		
		 @media (max-width: 768px) {
		    .hero {
		      flex-direction: column;
		      padding: 20px;
		    }
		
		    .hero-text {
		      padding-right: 0;
		      text-align: center;
		    }
		
		    .qr-code {
		      width: 200px;
		      height: 200px;
		      margin-top: 20px;
		    }
		
		    .hero-text h1 {
		      font-size: 24px;
		    }
		
		    .hero-text p {
		      font-size: 16px;
		    }
		
		    .slider {
		      background-size: contain;
		    }
			figure .p {
			  font-size: 12px;
			  transform: translate(-180px, 0);
				padding: 0 !important;
			}
			figure .p div div{
					word-break:break-all;
					display:-webkit-box;
					-webkit-line-clamp:1;
					-webkit-box-orient:vertical;
					overflow:hidden;
			}
		
			figure:hover .p {
				transform: translate(0, 0);

			}
		  }
</style>

<script>
	import 'fullpage.js/dist/fullpage.min.css';
	import fullpage from 'fullpage.js';
	import axios from 'axios';
	export default {
		name: 'Home',
		data() {
			return {
				fullpageInstance: null,
				show: false,
				userLength: 0,
				swiperData: ['/uploads/team_01_f639387028.jpg?updated_at=2022-06-13T02:25:25.268Z',
					'/uploads/2023_GZ_00ea2fd7ef.jpg?updated_at=2024-05-11T07:05:43.713Z',
					'/uploads/2024_GZ_fadc0ea1c9.jpg?updated_at=2024-05-11T07:04:51.371Z',
					'/uploads/2024_ZZ_2b2bb0a831.jpg?updated_at=2024-05-11T07:05:50.160Z'
				],
				userData: [],
			}
		},
		async created() {
			// this.getSwiperData()
			await this.getUserData()
			this.show = true
		},
		methods: {
			getSwiperData() {
				axios.get(`${this.baseUrl}/api/indexSwiper`) // 假设这个接口返回所有题目
					.then(response => {
						console.log(response);

					})
					.catch(error => {
						console.log(error);
					});
			},
			getUserData() {
				axios.get(`${this.baseUrl}/api/team-members?populate=*`) // 假设这个接口返回所有题目
					.then(response => {
						console.log(response.data.data);
						response.data.data = response.data.data.map(item => item.attributes)
						this.userLength = response.data.data.length
						this.userData = response.data.data
					})
					.catch(error => {
						console.log(error);
					});
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.fullpageInstance = new fullpage('#fullpage', {
					//滚动
					css3: true,
					scrollingSpeed: 500,
					autoScrolling: true,
					fitToSection: true,
					fitToSectionDelay: 1000,
					scrollBar: true,
					scrollHorizontally: true,
					licenseKey: 'YOUR_LICENSE_KEY', // 如果你有fullpage.js的license key,
					navigation: true, // 启用指示点
					navigationPosition: 'right', // 指示点位置
				});
			});

		},
		beforeDestroy() {
			if (this.fullpageInstance) {
				this.fullpageInstance.destroy('all');
				this.fullpageInstance = null; // 清除引用
			}
		}
	};
</script>